<?php

namespace JsonLowCode\UI;

use JsonLowCode\Schema;
use JsonLowCode\Traits\Props\HasAnimated;
use JsonLowCode\Traits\Props\HasContentStyle;
use JsonLowCode\Traits\Props\HasDisabled;
use JsonLowCode\Traits\Props\HasDisplayDirective;
use JsonLowCode\Traits\Props\HasFooterStyle;
use JsonLowCode\Traits\Props\HasHeaderStyle;
use JsonLowCode\Traits\Props\HasShow;
use JsonLowCode\Traits\Props\HasTitle;
use JsonLowCode\Traits\Props\HasZIndex;
use JsonLowCode\Traits\Slots\HasSlotFooter;
use JsonLowCode\Traits\Slots\HasSlotHeader;
use JsonLowCode\Traits\Slots\HasSlotTrigger;

/**
 * 弹出信息 NPopover
 * @meta 提供methods
 * @meta setShow(show:boolean) 非受控模式下控制是否显示 popover
 * @meta syncPosition() 同步 popover 位置
 * @method static Popover make(mixed $children = null) Popover组件
 */
class Popover extends Schema
{
    protected string $componentName = "NPopover";

    use HasAnimated, HasDisabled, HasTitle, HasShow, HasZIndex;

    use HasHeaderStyle, HasFooterStyle, HasContentStyle;

    use HasDisplayDirective;

    use HasSlotHeader, HasSlotFooter, HasSlotTrigger;

    public function __construct(mixed $children = null)
    {
        parent::__construct();
        $this->children($children);
    }

    /**
     * popover 的箭头样式
     * @param array|string $arrowStyle
     * @return $this
     */
    public function arrowStyle(array|string $arrowStyle): static
    {
        return $this->prop("arrow-style",$arrowStyle);
    }

    /**
     * 箭头是否指向触发元素中心
     * @param bool|string $bool
     * @return $this
     */
    public function arrowPointToCenter(bool|string $bool = true): static
    {
        return $this->prop('arrow-point-to-center', $bool);
    }

    /**
     * 悬浮触发弹出信息的延迟
     * @param int|string $delay
     * @return $this
     */
    public function delay(int|string $delay = 100): static
    {
        return $this->prop('delay', $delay);
    }

    /**
     * 悬浮关闭弹出信息的延迟
     * @param int|string $duration
     * @return $this
     */
    public function duration(int|string $duration = 100): static
    {
        return $this->prop('duration', $duration);
    }

    /**
     * 是否在当前放置方式不能提供足够空间的时候调整弹出信息的位置
     * @param bool|string $bool
     * @return $this
     */
    public function flip(bool|string $bool = true): static
    {
        return $this->prop('flip', $bool);
    }

    /**
     * 是否在 trigger 为 hover 的时候，悬浮在 popover 时保持 popover 显示
     * @param bool|string $bool
     * @return $this
     */
    public function keepAliveOnHover(bool|string $bool = true): static
    {
        return $this->prop('keep-alive-on-hover', $bool);
    }

    /**
     * 覆盖触发元素
     * @param bool|string $bool
     * @return $this
     */
    public function overlap(bool|string $bool = true): static
    {
        return $this->prop('overlap', $bool);
    }

    /**
     * popover 的弹出位置
     * @param string $placement
     * @return $this
     */
    public function placement(string $placement = 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end'): static
    {
        return $this->prop('placement', $placement);
    }


    /**
     * 是否不添加默认样式
     * @param bool|string $bool
     * @return $this
     */
    public function raw(bool|string $bool = true): static
    {
        return $this->prop('raw', $bool);
    }

    /**
     * popover 内容是否可滚动
     * @param bool|string $bool
     * @return $this
     */
    public function scrollable(bool|string $bool = true): static
    {
        return $this->prop('scrollable', $bool);
    }

    /**
     * 是否显示箭头
     * @param bool|string $bool
     * @return $this
     */
    public function showArrow(bool|string $bool = true): static
    {
        return $this->prop('show-arrow', $bool);
    }

    /**
     * 弹出内容的卸载位置，false 会待在原地
     * @param bool|string $to string | HTMLElement | false
     * @return $this
     */
    public function to(bool|string $to = "body"): static
    {
        return $this->prop('to', $to);
    }

    /**
     * popover 的触发方式
     * @param string $trigger
     * @return $this
     */
    public function trigger(string $trigger = 'hover' | 'click' | 'focus' | 'manual'): static
    {
        return $this->prop('trigger', $trigger);
    }


    /**
     * 'trigger' 表示 popover 的宽度会和它的触发元素一致
     * @param int|string $trigger number | 'trigger'
     * @return $this
     */
    public function width(int|string $trigger = 'trigger'): static
    {
        return $this->prop('width', $trigger);
    }

    /**
     * 手动控制位置时弹出内容的 CSS left 的像素值（x，y 都设置才能生效）
     * @param int|string $x
     * @return $this
     */
    public function x(int|string $x): static
    {
        return $this->prop('x', $x);
    }

    /**
     * 手动控制位置时弹出内容的 CSS top 的像素值（x，y 都设置才能生效）
     * @param int|string $y
     * @return $this
     */
    public function y(int|string $y): static
    {
        return $this->prop('y', $y);
    }

    /**
     * clickoutside 时触发的回调函数
     * @param string $value  (e: MouseEvent) => void
     * @return $this
     */
    public function onClickOutSide(string $value = "(e)=>{console.log(e)}"): static
    {
        return $this->events('onClickoutside', $value);
    }

    /**
     * 显示状态改变的回调函数
     * @param string $value  (value: boolean) => void
     * @return $this
     */
    public function onUpdateShow(string $value = "(value)=>{console.log(value)}"): static
    {
        return $this->events('onUpdate:show', $value);
    }

}
